<template>
  <div class="app-container">
    <div class="search_container_warp">
      <el-form
        ref="queryFormRef"
        class="search_container"
        :model="queryParams"
        :inline="true"
      >
        <!-- 		
				<el-form-item >
					<span style="font-size: 14px; font-weight: bold;margin-left: 30px">赛项名称：{{ title }}</span>					
				</el-form-item>
			-->

        <el-form-item prop="keywords" label="状态">
          <el-select
            style="width: 120px"
            v-model="queryParams.status"
            @change="statusChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="schoolName" label="学校/姓名">
          <el-input
            v-model="queryParams.schoolName"
            clearable
            @keyup.enter="handleQuery"
          >
            <template #suffix>
              <el-icon
                class="el-input__icon searchIconClass"
                @click="handleQuery"
              >
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span style="font-size: 14px; font-weight: bold; margin-left: 20px"
            >赛项名称：{{ title }}</span
          >
        </div>
      </template>

      <el-table
        ref="dataTableRef"
        class="customTableClass"
        v-loading="loading"
        :data="memberList"
        highlight-current-row
        border
      >
        <el-table-column label="序号" type="index" align="center" width="60" />
        <el-table-column
          label="学校名称"
          sortable
          prop="schoolName"
          align="center"
          min-width="180"
        />
        <el-table-column
          label="组别"
          sortable
          prop="matchGroup"
          align="center"
          width="80"
        />
        <el-table-column
          label="赛队"
          sortable
          prop="matchTeam"
          align="center"
          width="80"
        />
        <el-table-column
          label="姓名"
          sortable
          prop="stuName"
          align="center"
          min-width="100"
        />
        <el-table-column
          label="身份证号码"
          prop="stuIdCard"
          align="center"
          min-width="120"
        />
        <el-table-column
          label="状态"
          sortable
          prop="status"
          align="center"
          width="80"
        />
        <el-table-column
          label="参赛时间"
          sortable
          :sort-method="startTimeSortMethodFn"
          prop="startTime"
          align="center"
          min-width="105"
        />
        <el-table-column
          label="完赛时间"
          sortable
          :sort-method="endTimeSortMethodFn"
          prop="endTime"
          align="center"
          min-width="105"
        />

        <el-table-column
          label="备注"
          sortable
          prop="remark"
          align="center"
          min-width="100"
        />
        <el-table-column label="操作" prop="code" align="center" width="60">
          <template #default="scope">
            <el-icon class="editIconClass">
              <Edit @click="editFn(scope.row)" />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改状态弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="600px"
      draggable
      align-center
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="学校名称" prop="schoolName">
          <el-input v-model="formData.schoolName" disabled />
        </el-form-item>

        <el-form-item label="队员姓名" prop="stuName">
          <el-input v-model="formData.stuName" disabled />
        </el-form-item>
        <el-form-item label="身份证号" prop="stuIdCard">
          <el-input v-model="formData.stuIdCard" disabled />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="formData.status">
            <el-option
              v-for="item in examinationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            :rows="4"
            type="textarea"
            placeholder="必须填写原因"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getExamineeList, updateStatus } from "@/api/examProgress";

import { ItemPageVO, ItemForm, Options } from "@/api/examProgress/types";
import { queryFilter, moreQueryFilter, computeHeiht } from "@/utils/index";

defineOptions({
  name: "ExamProgressDetails",
  inheritAttrs: false,
});

const router = useRouter();
const queryFormRef = ref(ElForm);
const formRef = ref(ElForm);

const options = ref<Options[]>([]);
const examinationOptions = ref<Options[]>([]);

// 赛事状态对象 ''=全部，'1'=完赛，'2'=进行中,'0'=未开始
options.value = [
  {
    label: "全部",
    value: "1",
  },
  {
    label: "完赛",
    value: "2",
  },
  {
    label: "进行中",
    value: "3",
  },
  {
    label: "未开始",
    value: "4",
  },
];

examinationOptions.value = [
  {
    label: "正常",
    value: "1",
  },
  {
    label: "重考",
    value: "2",
  },
  {
    label: "弃考",
    value: "3",
  },
  {
    label: "作弊",
    value: "4",
  },
];

const loading = ref(false);
const total = ref(0);
const memberList = ref<ItemPageVO[]>([]);
const originalMemberList = ref<ItemPageVO[]>([]);
const route = useRoute();

const queryParams = reactive<ItemForm>({
  stuName: "",
  status: "1",
  schoolName: "",
  stuIdCard: "",
  remark: "",
  matchGroup: "",
  matchTeam: "",
});

const dialog = reactive({
  title: "修改状态",
  visible: false,
});

const formData = reactive<ItemForm>({
  stuName: "",
  status: "",
  statusCode: "",
  schoolName: "",
  stuIdCard: "",
  remark: "",
  matchGroup: "",
  matchTeam: "",
});

const rules = reactive({
  remark: [{ required: true, message: " ", trigger: "blur" }],
});

const title = computed(() => {
  return route.query?.name || "";
});

function goBack() {
  router.back();
}

/** 查询 */
function handleQuery() {
  let { schoolName } = queryParams;
  schoolName = schoolName || "";
  let arr: Options[] = [
    { label: "stuName", value: schoolName },
    { label: "schoolName", value: schoolName },
  ];
  if (schoolName) {
    memberList.value = moreQueryFilter(originalMemberList.value, arr);
  } else {
    query();
  }
}
// 切换赛项状态
function statusChange(value: any) {
  query();
}

/** 接口查询 */
function query() {
  loading.value = true;
  if (!route.query?.id) {
    return;
  }
  // const query = reactive<ItemForm>({
  //   id: route.query.id,
  //   status: queryParams.status,
  // });

  getExamineeList({
    id: route.query.id,
    status: queryParams.status,
  })
    .then(({ data }) => {
      data = data.map((item) => {
        item.statusCode = examinationOptions.value.find(
          (v) => v.label === item.status
        )?.value;
        return item;
      });
      memberList.value = data;
      originalMemberList.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function resetQuery(status: any = "1") {
  queryFormRef.value.resetFields();
  queryParams.status = status;
  query();
}

/** 过滤方法 */
function startTimeSortMethodFn(a: any, b: any) {
  return (
    new Date(a.startTime || 0).getTime() - new Date(b.startTime || 0).getTime()
  );
}
/** 过滤方法 */
function endTimeSortMethodFn(a: any, b: any) {
  return (
    new Date(a.endTime || 0).getTime() - new Date(b.endTime || 0).getTime()
  );
}
/** 关闭表单弹窗 */
function closeDialog() {
  dialog.visible = false;
}
/** open表单弹窗 */
function editFn(data: ItemForm) {
  dialog.visible = true;
  const { stuName, status, statusCode, schoolName, stuIdCard, remark, id } =
    data;
  // formData.value = data.value
  formData.stuName = stuName;
  formData.status = statusCode;
  formData.schoolName = schoolName;
  formData.stuIdCard = stuIdCard;
  formData.remark = remark;
  formData.id = id;
}
/** 提交表单 */
function handleSubmit() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      updateStatus({
        id: formData.id,
        status: formData.status,
        remark: formData.remark,
      })
        .then(() => {
          resetQuery();
        })
        .finally(() => {
          loading.value = false;
        });

      closeDialog();
    }
  });
}

onMounted(() => {
  resetQuery(route.query?.type);
  computeHeiht(186);
});
</script>
<style lang="scss" scoped></style>
